<template>
	<view>

		<u-popup :show="isShow" mode="bottom">
			<view>

				<view class="pop-sel-top">
					<view class="pop-sel-title">
						<p>{{popTitle}}</p>
					</view>
					<uSearch class="u-search" ref="uSearch" @searchEvent="searchEvent" :custom="true"></uSearch>
				</view>


				<scroll-view scroll-y="true" @scrolltolower="reachBottom"
					style="height: 400px;padding:100px 0px 50px 0px;">

					<!-- 					<u-checkbox-group class="p10" v-model="checkboxValue" :borderBottom="true" placement="column"
						iconPlacement="right">
						<u-checkbox :customStyle="{marginBottom: '16px'}" v-for="(item, index) in checkboxList"
							:key="index" :label="item.TrueName"
							:name="JSON.stringify({'TrueName':item.TrueName,'UserCode':item.UserCode})">
						</u-checkbox>
					</u-checkbox-group>

					<u-loadmore :status="status" :nomore-text="''" /> -->
				</scroll-view>

				<view class="pop-sel-button">
					<u-button class="flexItem ml5 mr5" color="#337AB7" @click="submit">确定</u-button>
					<u-button class="flexItem ml5 mr5" color="#FF9900" @click="showUser = false">关闭</u-button>
				</view>

			</view>
		</u-popup>


	</view>
</template>

<script>
	export default {
		props: {
			isShow: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				showUser: false,
				popTitle: "选择人员",
				checkboxValue: [],
				checkboxList: [],
				status: "loadmore",
				loadText: "",
				pageIndex: 0,
				pageSize: 20,
				OrgCode: "",
				OrgPath: "",
				TypeValue: "",
				filter: {
					list: []
				},
			}
		},
		mounted() {

		},
		methods: {
			reachBottom() {
				this.getData();
			},
			initData() {
				this.checkboxValue = [];
				this.checkboxList = [];
				this.pageIndex = 0;
				this.status = "loading";
				this.filter = {
					list: []
				}
			},
			getData() {

				const data = {
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					OrgPath: this.OrgPath,
					TypeValue: this.TypeValue,
					MainUnit: true,
					From: 0,
					Type: 0,
					filter: JSON.stringify(this.filter)
				}

				this.$api.myAjaxPlat("/api/Users/GetUserByOrgCode", data).then(res => {
					console.log(res);

					if (res.total == 0) {
						this.status = 'nomore';
						return;
					}

					if (res.data.length > 0) {
						this.checkboxList = this.checkboxList.concat(res.data);
						this.status = 'loading';
						this.pageIndex = ++this.pageIndex;
					}
					if (this.checkboxList.length == res.total) this.status = 'nomore';

					this.showUser = true;
				})


			},
			searchEvent(e) {
				this.filter = e;
				this.checkboxValue = [];
				this.checkboxList = [];
				this.pageIndex = 0;
				this.status = "loading";
				this.getData();
			},
			submit() {

				const list = this.checkboxValue;
				this.$emit("checkEmit", list);

				this.showUser = false;
			}
		}
	}
</script>

<style scoped>
	.pop-sel-title {
		background-color: #386FA8;
		/* position: fixed; */
		z-index: 10;
		font-weight: 600;
		padding-left: 10px;
		width: 100%;
		color: #FFFFFF;
		line-height: 50px;
		height: 50px;
	}

	.pop-sel-top {
		width: 100%;
		z-index: 10;
		position: fixed;
	}


	.pop-sel-button {
		height: 44px;
		bottom: 0;
		width: 100%;
		display: flex;
		z-index: 1;
		position: fixed;
	}

	.wrap {
		padding: 10rpx 0;
	}

	.uSearch {
		background-color: #FFFFFF;
	}
</style>
